<template>
    <div class="dialogue-report-container">
      <div class="report-header">
        <h1><i class="fas fa-file-alt"></i> 对话分析报告</h1>
        <p class="subtitle">基于{{ dialogueDate }}的对话内容生成</p>
      </div>
  
      <div class="report-content">
        <!-- 报告概览 -->
        <div class="report-section overview-section">
          <div class="section-header">
            <h2><i class="fas fa-chart-pie"></i> 对话概览</h2>
          </div>
          <div class="overview-content">
            <div class="overview-card">
              <div class="overview-icon">
                <i class="fas fa-comments"></i>
              </div>
              <div class="overview-text">
                <div class="overview-value">{{ dialogueSummary.totalMessages }}</div>
                <div class="overview-label">总对话轮次</div>
              </div>
            </div>
            <div class="overview-card">
              <div class="overview-icon">
                <i class="fas fa-clock"></i>
              </div>
              <div class="overview-text">
                <div class="overview-value">{{ formatTime(dialogueSummary.duration) }}</div>
                <div class="overview-label">对话时长</div>
              </div>
            </div>
            <div class="overview-card">
              <div class="overview-icon">
                <i class="fas fa-chart-line"></i>
              </div>
              <div class="overview-text">
                <div class="overview-value">{{ dialogueSummary.wordsPerMinute }}</div>
                <div class="overview-label">词/分钟</div>
              </div>
            </div>
            <div class="overview-card">
              <div class="overview-icon">
                <i class="fas fa-star"></i>
              </div>
              <div class="overview-text">
                <div class="overview-value">{{ dialogueSummary.qualityScore }}/10</div>
                <div class="overview-label">对话质量</div>
              </div>
            </div>
          </div>
        </div>
  
        <!-- 对话内容摘要 -->
        <div class="report-section summary-section">
          <div class="section-header">
            <h2><i class="fas fa-clipboard-list"></i> 对话摘要</h2>
          </div>
          <div class="summary-content">
            <div class="summary-points">
              <h3>关键对话点</h3>
              <ul>
                <li v-for="(point, index) in dialogueSummary.keyPoints" :key="index">
                  <i class="fas" :class="point.type === 'positive' ? 'fa-check-circle' : 'fa-exclamation-circle'"></i>
                  {{ point.text }}
                </li>
              </ul>
            </div>
            <div class="summary-timeline">
              <h3>对话时间线</h3>
              <div class="timeline">
                <div v-for="(item, index) in dialogueSummary.timeline" :key="index" class="timeline-item">
                  <div class="timeline-time">{{ item.time }}</div>
                  <div class="timeline-dot"></div>
                  <div class="timeline-content">
                    <div class="timeline-title">{{ item.title }}</div>
                    <div class="timeline-desc">{{ item.description }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
  
        <!-- 能力评估 -->
        <div class="report-section evaluation-section">
          <div class="section-header">
            <h2><i class="fas fa-chart-bar"></i> 能力评估</h2>
          </div>
          <div class="evaluation-content">
            <div class="evaluation-chart">
              <canvas ref="radarChart"></canvas>
            </div>
            <div class="evaluation-details">
              <div v-for="(skill, index) in evaluation.skills" :key="index" class="skill-item">
                <div class="skill-info">
                  <div class="skill-name">{{ skill.name }}</div>
                  <div class="skill-score">{{ skill.score }}/10</div>
                </div>
                <div class="skill-bar">
                  <div class="skill-progress" :style="{ width: skill.score * 10 + '%' }"></div>
                </div>
                <div class="skill-feedback">
                  <i class="fas" :class="skill.score >= 7 ? 'fa-check-circle' : skill.score >= 4 ? 'fa-exclamation-circle' : 'fa-times-circle'"></i>
                  {{ skill.feedback }}
                </div>
              </div>
            </div>
          </div>
        </div>
  
        <!-- 详细对话记录 -->
        <div class="report-section dialogue-section">
          <div class="section-header">
            <h2><i class="fas fa-comments"></i> 详细对话记录</h2>
          </div>
          <div class="dialogue-content">
            <div v-for="(message, index) in dialogueMessages" :key="index" class="message-item">
              <div class="message-header">
                <div class="message-avatar" :class="message.type">
                  <i :class="message.type === 'user' ? 'fas fa-user' : 'fas fa-robot'"></i>
                </div>
                <div class="message-meta">
                  <div class="message-sender">{{ message.type === 'user' ? '您' : 'AI助手' }}</div>
                  <div class="message-time">{{ message.time }}</div>
                </div>
              </div>
              <div class="message-text">{{ message.text }}</div>
              <div class="message-analysis" v-if="message.analysis">
                <div class="analysis-header">
                  <i class="fas fa-chart-bar"></i> 分析评估
                </div>
                <div class="analysis-content">
                  <div class="analysis-item" v-for="(item, i) in message.analysis" :key="i">
                    <i class="fas" :class="item.type === 'positive' ? 'fa-check-circle' : 'fa-exclamation-circle'"></i>
                    {{ item.text }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
  
        <!-- 改进建议 -->
        <div class="report-section improvement-section">
          <div class="section-header">
            <h2><i class="fas fa-lightbulb"></i> 改进建议</h2>
          </div>
          <div class="improvement-content">
            <div class="improvement-card">
              <div class="improvement-header">
                <i class="fas fa-check-circle"></i>
                <h3>您的优势</h3>
              </div>
              <ul>
                <li v-for="(strength, index) in improvements.strengths" :key="index">{{ strength }}</li>
              </ul>
            </div>
            <div class="improvement-card">
              <div class="improvement-header">
                <i class="fas fa-exclamation-circle"></i>
                <h3>提升建议</h3>
              </div>
              <ul>
                <li v-for="(suggestion, index) in improvements.suggestions" :key="index">{{ suggestion }}</li>
              </ul>
            </div>
            <div class="improvement-card">
              <div class="improvement-header">
                <i class="fas fa-book"></i>
                <h3>学习资源</h3>
              </div>
              <ul>
                <li v-for="(resource, index) in improvements.resources" :key="index">
                  <a :href="resource.link" target="_blank">{{ resource.title }}</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
  
      <div class="report-footer">
        <button class="download-btn" @click="downloadReport">
          <i class="fas fa-download"></i> 下载报告 (PDF)
        </button>
        <button class="print-btn" @click="printReport">
          <i class="fas fa-print"></i> 打印报告
        </button>
      </div>
    </div>
  </template>
  
  <script>
  import { Chart, registerables } from 'chart.js'
  Chart.register(...registerables)
  
  export default {
    name: 'DialogueReport',
    data() {
      return {
        dialogueDate: '2023年11月15日',
        dialogueSummary: {
          totalMessages: 24,
          duration: 854, // 秒
          wordsPerMinute: 120,
          qualityScore: 8.2,
          keyPoints: [
            { text: '清晰地表达了项目需求和目标', type: 'positive' },
            { text: '对技术细节的讨论深入且专业', type: 'positive' },
            { text: '部分问题回答略显简短，可更详细', type: 'negative' },
            { text: '很好地使用了专业术语', type: 'positive' }
          ],
          timeline: [
            { time: '00:00', title: '对话开始', description: '双方自我介绍' },
            { time: '02:30', title: '需求讨论', description: '详细讨论项目需求' },
            { time: '05:45', title: '技术方案', description: '探讨技术实现方案' },
            { time: '10:20', title: '问题解决', description: '解决关键技术难题' },
            { time: '14:15', title: '对话结束', description: '总结并确认下一步' }
          ]
        },
        evaluation: {
          skills: [
            { name: '沟通表达', score: 8.5, feedback: '表达清晰，逻辑性强' },
            { name: '专业知识', score: 9, feedback: '展现了深厚的专业知识' },
            { name: '问题解决', score: 7.5, feedback: '能有效分析并解决问题' },
            { name: '主动提问', score: 6, feedback: '可提出更多深入问题' },
            { name: '细节描述', score: 7, feedback: '部分细节可更详细说明' }
          ]
        },
        dialogueMessages: [
          {
            type: 'user',
            time: '00:00',
            text: '你好，我想讨论一下我们新项目的技术方案',
            analysis: [
              { text: '开场直接明确，很好', type: 'positive' }
            ]
          },
          {
            type: 'ai',
            time: '00:15',
            text: '您好！很高兴为您服务。请问您想了解哪方面的技术方案？',
            analysis: [
              { text: '回应友好且开放', type: 'positive' }
            ]
          },
          {
            type: 'user',
            time: '01:30',
            text: '我们需要一个高性能的前端框架，能处理大量数据可视化',
            analysis: [
              { text: '需求描述清晰', type: 'positive' },
              { text: '可补充具体数据量和使用场景', type: 'negative' }
            ]
          },
          // 更多对话记录...
        ],
        improvements: {
          strengths: [
            '清晰地表达了项目需求',
            '展现了专业的技术知识',
            '能快速理解技术方案'
          ],
          suggestions: [
            '可提供更多具体的使用场景信息',
            '尝试提出更多深入的技术问题',
            '部分回答可增加细节描述'
          ],
          resources: [
            { title: '高效沟通技巧指南', link: '#' },
            { title: '技术方案设计最佳实践', link: '#' },
            { title: '数据可视化框架比较', link: '#' }
          ]
        },
        radarChart: null
      }
    },
    mounted() {
      this.initRadarChart()
      document.title = '对话分析报告 - AI助手'
    },
    methods: {
      initRadarChart() {
        const ctx = this.$refs.radarChart.getContext('2d')
        this.radarChart = new Chart(ctx, {
          type: 'radar',
          data: {
            labels: this.evaluation.skills.map(skill => skill.name),
            datasets: [
              {
                label: '您的得分',
                data: this.evaluation.skills.map(skill => skill.score),
                backgroundColor: 'rgba(52, 152, 219, 0.2)',
                borderColor: 'rgba(52, 152, 219, 1)',
                borderWidth: 2,
                pointBackgroundColor: 'rgba(52, 152, 219, 1)',
                pointRadius: 4
              },
              {
                label: '优秀水平',
                data: this.evaluation.skills.map(() => 8),
                backgroundColor: 'rgba(155, 155, 155, 0.1)',
                borderColor: 'rgba(155, 155, 155, 0.5)',
                borderWidth: 1,
                borderDash: [5, 5],
                pointRadius: 0
              }
            ]
          },
          options: {
            scales: {
              r: {
                angleLines: {
                  display: true,
                  color: 'rgba(0, 0, 0, 0.1)'
                },
                suggestedMin: 0,
                suggestedMax: 10,
                ticks: {
                  stepSize: 2,
                  backdropColor: 'transparent'
                }
              }
            },
            plugins: {
              legend: {
                position: 'bottom',
                labels: {
                  usePointStyle: true
                }
              }
            }
          }
        })
      },
      formatTime(seconds) {
        const mins = Math.floor(seconds / 60)
        const secs = seconds % 60
        return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
      },
      downloadReport() {
        alert('报告下载功能需要后端支持，此处仅为演示')
      },
      printReport() {
        window.print()
      }
    },
    beforeUnmount() {
      if (this.radarChart) {
        this.radarChart.destroy()
      }
    }
  }
  </script>
  
  <style scoped>
  .dialogue-report-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    color: #333;
    font-family: 'Segoe UI', 'PingFang SC', sans-serif;
  }
  
  .report-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #3498db;
  }
  
  .report-header h1 {
    font-size: 2.2rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
  }
  
  .report-header .subtitle {
    font-size: 1.1rem;
    color: #7f8c8d;
  }
  
  .report-content {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 2rem;
  }
  
  .report-section {
    margin-bottom: 3rem;
  }
  
  .section-header {
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
  }
  
  .section-header h2 {
    font-size: 1.5rem;
    color: #2c3e50;
    display: flex;
    align-items: center;
  }
  
  .section-header h2 i {
    margin-right: 0.8rem;
    color: #3498db;
  }
  
  /* 概览部分样式 */
  .overview-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
  }
  
  .overview-card {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  
  .overview-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
  
  .overview-icon {
    width: 50px;
    height: 50px;
    background-color: #3498db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    color: white;
    font-size: 1.5rem;
  }
  
  .overview-value {
    font-size: 1.8rem;
    font-weight: bold;
    color: #2c3e50;
  }
  
  .overview-label {
    font-size: 0.9rem;
    color: #7f8c8d;
  }
  
  /* 摘要部分样式 */
  .summary-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1rem;
  }
  
  .summary-points h3, .summary-timeline h3 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 1rem;
  }
  
  .summary-points ul {
    list-style: none;
    padding: 0;
  }
  
  .summary-points li {
    margin-bottom: 0.8rem;
    padding-left: 1.5rem;
    position: relative;
  }
  
  .summary-points li i {
    position: absolute;
    left: 0;
    top: 0.2rem;
  }
  
  .fa-check-circle {
    color: #2ecc71;
  }
  
  .fa-exclamation-circle {
    color: #f39c12;
  }
  
  .timeline {
    position: relative;
    padding-left: 1.5rem;
  }
  
  .timeline::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #eee;
  }
  
  .timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
    display: flex;
  }
  
  .timeline-time {
    width: 60px;
    font-weight: bold;
    color: #3498db;
  }
  
  .timeline-dot {
    width: 12px;
    height: 12px;
    background-color: #3498db;
    border-radius: 50%;
    margin: 0 1rem;
    position: relative;
    z-index: 1;
  }
  
  .timeline-content {
    flex: 1;
  }
  
  .timeline-title {
    font-weight: bold;
    margin-bottom: 0.3rem;
  }
  
  .timeline-desc {
    font-size: 0.9rem;
    color: #7f8c8d;
  }
  
  /* 评估部分样式 */
  .evaluation-content {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
    margin-top: 1rem;
  }
  
  .evaluation-chart {
    height: 300px;
  }
  
  .skill-item {
    margin-bottom: 1.5rem;
  }
  
  .skill-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }
  
  .skill-name {
    font-weight: bold;
  }
  
  .skill-score {
    color: #3498db;
    font-weight: bold;
  }
  
  .skill-bar {
    height: 8px;
    background-color: #f0f0f0;
    border-radius: 4px;
    margin-bottom: 0.5rem;
  }
  
  .skill-progress {
    height: 100%;
    background-color: #3498db;
    border-radius: 4px;
    transition: width 1s ease-in-out;
  }
  
  .skill-feedback {
    font-size: 0.9rem;
    color: #7f8c8d;
    display: flex;
    align-items: center;
  }
  
  .skill-feedback i {
    margin-right: 0.5rem;
  }
  
  .fa-times-circle {
    color: #e74c3c;
  }
  
  /* 对话记录部分样式 */
  .dialogue-content {
    margin-top: 1rem;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .message-item {
    padding: 1.5rem;
    border-bottom: 1px solid #eee;
  }
  
  .message-item:last-child {
    border-bottom: none;
  }
  
  .message-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }
  
  .message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    color: white;
  }
  
  .message-avatar.user {
    background-color: #3498db;
  }
  
  .message-avatar.ai {
    background-color: #2ecc71;
  }
  
  .message-meta {
    flex: 1;
  }
  
  .message-sender {
    font-weight: bold;
  }
  
  .message-time {
    font-size: 0.8rem;
    color: #7f8c8d;
  }
  
  .message-text {
    line-height: 1.6;
    margin-bottom: 1rem;
  }
  
  .message-analysis {
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 1rem;
    margin-top: 1rem;
  }
  
  .analysis-header {
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #3498db;
    display: flex;
    align-items: center;
  }
  
  .analysis-header i {
    margin-right: 0.5rem;
  }
  
  .analysis-item {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: flex-start;
  }
  
  .analysis-item i {
    margin-right: 0.5rem;
    margin-top: 0.2rem;
  }
  
  /* 改进建议部分样式 */
  .improvement-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
  }
  
  .improvement-card {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
  }
  
  .improvement-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }
  
  .improvement-header h3 {
    margin: 0;
    font-size: 1.2rem;
  }
  
  .improvement-header i {
    margin-right: 0.8rem;
    font-size: 1.2rem;
  }
  
  .improvement-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .improvement-card li {
    margin-bottom: 0.8rem;
    padding-left: 1.5rem;
    position: relative;
  }
  
  .improvement-card li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #3498db;
    font-weight: bold;
  }
  
  .improvement-card a {
    color: #3498db;
    text-decoration: none;
  }
  
  .improvement-card a:hover {
    text-decoration: underline;
  }
  
  /* 页脚按钮 */
  .report-footer {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
  }
  
  .download-btn, .print-btn {
    padding: 0.8rem 1.5rem;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
  }
  
  .download-btn {
    background-color: #3498db;
    color: white;
    border: none;
  }
  
  .download-btn:hover {
    background-color: #2980b9;
  }
  
  .print-btn {
    background-color: white;
    border: 1px solid #3498db;
    color: #3498db;
  }
  
  .print-btn:hover {
    background-color: #f5f9fd;
  }
  
  .report-footer button i {
    margin-right: 0.5rem;
  }
  
  /* 响应式设计 */
  @media (max-width: 992px) {
    .summary-content {
      grid-template-columns: 1fr;
    }
    
    .evaluation-content {
      grid-template-columns: 1fr;
    }
    
    .evaluation-chart {
      height: 250px;
      margin-bottom: 2rem;
    }
  }
  
  @media (max-width: 768px) {
    .dialogue-report-container {
      padding: 1rem;
    }
    
    .report-header h1 {
      font-size: 1.8rem;
    }
    
    .overview-content {
      grid-template-columns: 1fr 1fr;
    }
    
    .improvement-content {
      grid-template-columns: 1fr;
    }
    
    .report-footer {
      flex-direction: column;
      gap: 1rem;
    }
    
    .download-btn, .print-btn {
      width: 100%;
    }
  }
  
  @media print {
    .dialogue-report-container {
      padding: 0;
    }
    
    .report-header {
      page-break-after: avoid;
    }
    
    .report-section {
      page-break-inside: avoid;
    }
    
    .report-footer {
      display: none;
    }
  }
  </style>
